<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { getAllSkuListAPI ,onSaleAPI,cancelSaleAPI,getSkuDetailAPI,deleteSkuAPI } from '@/api/product/sku'
import type { AddSkuParams } from '@/types/product/sku'
import {Bottom,InfoFilled,Delete,Edit, Top } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 分页参数
const currentPageParams = ref({
    page: 1,
    pageSize: 5,
    total: 20
})

// sku数据列表
const skuList = ref<AddSkuParams[]>([])

const getSkuList = async() => {
    loading.value = true
    const res = await getAllSkuListAPI(currentPageParams.value.page, currentPageParams.value.pageSize)
    console.log(res);
    skuList.value = res.data.records
    currentPageParams.value.total = res.data.total
    loading.value = false
}

// 切换页码变化
const changePage = () => {
    getSkuList()
}

// 切换页数
const changePageSize = () => {
    getSkuList()
}

// 商品上架
const onSale = async(skuId: number | string) => {
    const res = await onSaleAPI(skuId)
    if(res.code === 200) {
        // 提示用户
        ElMessage.success("该商品上架成功")
        // 刷新页面
        getSkuList()
    } 
}

// 商品下架
const cancelSale = async(skuId: number | string) => {
    const res = await cancelSaleAPI(skuId)
    // console.log(res);
    if(res.code === 200) {
        // 提示用户
        ElMessage.success("该商品下架成功")
        // 刷新页面
        getSkuList()
    } 
}
// 表格加载效果
const loading = ref(false)

// 更新sku数据
const updateSku = async() => {
    ElMessage.success('sku更新业务正在研发中...')
}

// sku详情展示抽屉组件
const drawerShow = ref(false)

// sku详情数据
const skuDetail = ref<AddSkuParams>()

// 查看sku详情
const showSkuDetail = async (skuId: string | number) => {
    drawerShow.value = true
    const res = await getSkuDetailAPI(skuId)
    console.log(res);
    skuDetail.value = res.data
}

// 删除sku商品
const deleteSku = (skuId: string | number) => {
    ElMessageBox.confirm("你确定要删除该商品吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(async() => {
        const res  = await deleteSkuAPI(skuId)
        if(res.code === 200) {
            ElMessage.success("删除成功")
            getSkuList()
        }
    }).catch(() => {})
}

// 关闭详情弹框
const closeDrawer = () => {
    skuDetail.value = undefined
}

// 初始化
onMounted(() => {
    getSkuList()
})
</script>
<template>
    <el-card class="sku">
        <el-table border :data="skuList" v-loading="loading">
            <el-table-column type="index" label="序号" align="center" header-align="center" width="80px"></el-table-column>
            <el-table-column prop="skuName" show-overflow-tooltip  label="名称" align="center" header-align="center" width="250px"></el-table-column>
            <el-table-column prop="skuDesc" show-overflow-tooltip  label="描述" align="center" header-align="center" min-width="250px"></el-table-column>
            <el-table-column type="index" label="默认图片" align="center" header-align="center" width="150px">
                <template v-slot="{ row }">
                    <img :src="row.skuDefaultImg" class="boxImg" alt="">
                </template>
            </el-table-column>
            <el-table-column type="index" label="重量" align="center" header-align="center" width="100px">
                <template v-slot="{ row }">
                    <el-tag
                    type="primary"
                    effect="dark"
                    round
                    >
                    {{ row.weight }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column type="index" label="价格" align="center" header-align="center" width="100px">
                <template v-slot="{ row }">
                    <el-tag
                    type="success"
                    effect="dark"
                    round
                    >
                    {{ row.price }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" type="index" label="操作" align="center" header-align="center" width="300px">
                <template v-slot="{ row }">
                    <el-button size="large" v-if="row.isSale" type="info" :icon="Bottom" circle @click="cancelSale(row.id)"></el-button>
                    <el-button size="large" v-else type="success" :icon="Top" circle @click="onSale(row.id)" ></el-button>
                    <el-button size="large" type="primary" :icon="Edit" circle @click="updateSku "></el-button>
                    <el-button size="large" type="info" :icon="InfoFilled" circle @click="showSkuDetail(row.id)"></el-button>
                    <el-button size="large" type="danger" :icon="Delete" circle @click="deleteSku (row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        style="margin: 10px 0;"
        v-model:current-page="currentPageParams.page"
        v-model:page-size="currentPageParams.pageSize"
        :background="true"
        :page-sizes="[3,5, 10, 20, 30]"
        layout=" prev, pager, next, jumper,-> ,total, sizes"
        :total="currentPageParams.total"
        @size-change="changePageSize"
        @current-change="changePage"
        />
        <!-- 详情抽屉组件 -->
        <el-drawer  v-model="drawerShow" @closed="closeDrawer">
            <template #header>
                <span>查看商品详情</span>
            </template>
            <template #default >
                <el-row>
                    <el-col :span="6">名称：</el-col>
                    <el-col :span="18">{{skuDetail?.skuName}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">描述：</el-col>
                    <el-col :span="18">{{ skuDetail?.skuDesc }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">价格：</el-col>
                    <el-col :span="18">{{ skuDetail?.price }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">平台属性：</el-col>
                    <el-col :span="18">
                        <el-tag style="margin: 5px;" v-for="item in skuDetail?.skuAttrValueList" :key="item.attrId">{{ item.attrName }}</el-tag>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">销售属性：</el-col>
                    <el-col :span="18">
                        <el-tag style="margin: 5px;" v-for="item in skuDetail?.skuSaleAttrValueList" :key="item.saleAttrId">{{ item.saleAttrName }}</el-tag>
                    </el-col>
                </el-row>
                
                <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item v-for="item in skuDetail?.skuImageList" :key="item.id">
                        <img style="width: 100%;height: 100%;" :src="item.imgUrl" alt="">
                    </el-carousel-item>
                </el-carousel>
                
            </template>
        </el-drawer>
        <!-- 详情抽屉组件 -->
    </el-card>
</template>

<style scoped lang="scss">
.boxImg {
    width: 140px;
    max-height: 150px;
    border-radius: 15px;
    margin: 0 auto;

}
::v-deep(.cell) {
    padding: 0;
}
.el-drawer {
    .el-col {
        margin: 10px 0;
    }
    
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>